<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echart/echarts.min.js"></script>
    <script src="./echart/ecStat.js"></script>
    <script src="./echart/theme-chalk.js"></script>

    <!-- head 中 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="./weui/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://jqweui.com/dist/css/jquery-weui.css" />
    <link rel="stylesheet" type="text/css" href="http://jqweui.com/dist/lib/weui.min.css" />
    <script src="http://jqweui.com/dist/lib/jquery-2.1.4.js"></script>
    <script src="http://jqweui.com/dist/js/jquery-weui.js"></script>

    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>


<body>
    <div id="divChart" style="width: 100vw;height:50vh;"></div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">图表选择</label></div>
        <div class="weui-cell__bd" id="cellChooseChart">
            <input class="weui-input" id="inputChart" type="text" value="" readonly="">
        </div>
    </div>
    <script>
        myChart = echarts.init(document.getElementById('divChart'));

        var cellSize = [80, 80];
        var pieRadius = 30;

        function getVirtulData() {
            var date = +echarts.number.parseDate('2017-02-01');
            var end = +echarts.number.parseDate('2017-03-01');
            var dayTime = 3600 * 24 * 1000;
            var data = [];
            for (var time = date; time < end; time += dayTime) {
                data.push(
                    echarts.format.formatTime('yyyy-MM-dd', time)
                );
            }
            return data;
        }

        function getPieSeries(scatterData, chart) {
            return scatterData.map(function (item, index) {
                var center = chart.convertToPixel('calendar', item);
                console.log(center);
                return {
                    id: index + 'pie',
                    type: 'pie',
                    center: [200, 200],
                    label: {
                        normal: {
                            formatter: '{c}',
                            position: 'inside'
                        }
                    },
                    radius: pieRadius,
                    data: [
                        { name: '工作', value: Math.round(Math.random() * 24) },
                        { name: '娱乐', value: Math.round(Math.random() * 24) },
                        { name: '睡觉', value: Math.round(Math.random() * 24) }
                    ]
                };
            });
        }

        function getPieSeriesUpdate(scatterData, chart) {
            return scatterData.map(function (item, index) {
                var center = chart.convertToPixel('calendar', item);
                return {
                    id: index + 'pie',
                    center: center
                };
            });
        }

        var scatterData = getVirtulData();

        option = {
            tooltip: {},
            legend: {
                data: ['工作', '娱乐', '睡觉'],
                bottom: 20
            },
            calendar: {
                top: 'middle',
                left: 'center',
                orient: 'vertical',
                cellSize: cellSize,
                yearLabel: {
                    show: false,
                    fontSize: 30
                },
                dayLabel: {
                    margin: 20,
                    firstDay: 1,
                    nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                },
                monthLabel: {
                    show: false
                },
                range: ['2017-02']
            },
            series: [{
                id: 'label',
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    show: true,
                    formatter: function (params) {
                        return echarts.format.formatTime('dd', params.value[0]);
                    },
                    offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
                    fontSize: 14
                },
                data: scatterData
            }]
        };

        myChart.setOption(option, true);



        var pieInitialized;
        setTimeout(function () {
            pieInitialized = true;
            myChart.setOption({
                series: getPieSeries(scatterData, myChart)
            });
        }, 10);

        app.onresize = function () {
            if (pieInitialized) {
                myChart.setOption({
                    series: getPieSeriesUpdate(scatterData, myChart)
                });
            }
        };

    </script>

</body>

</html>